
import type { IBaseComponent, IComponentConfig } from '../types'

export default class BaseCompInfo implements IBaseComponent {
  
  /**
   * 初始化构造参数属性
   * @param {*} drag 拖拽组件描述信息
   * @param {*} props 参数属性
   * @param {*} events 事件属性
   * @param {*} slots 插槽属性
  */
  drag: any
  props: any
  events: any
  dataModel: any
  slots: any
  watch: any
  lifeCircle: any
  style: any

  constructor({ drag, props, events, dataModel, slots, watch, lifeCircle, style }: IBaseComponent) {
    this.drag = drag
    
    if (props) {
      this.props = this.appendGroup(this.baseProps, 'basic', '属性', props)
    }

    this.dataModel = this.appendGroup(this.baseDataModel, 'dataModel', '数据', [])

    if (events) {
      this.events = this.appendGroup(events, 'event', '事件', [])
    }

    if (slots) {
      this.slots = this.appendGroup(slots, 'slot', '插槽', [])
    }

    if (watch) {
      this.watch = this.appendGroup(watch, 'watch', '监听', [])
    }

    if (lifeCircle) {
      this.lifeCircle = this.appendGroup(lifeCircle, 'lifeCircle', '生命周期', [])
    }

    if (style) {
      this.style = this.appendGroup(style, 'style', '样式', [])
    }
  }

  private get baseProps(): IComponentConfig[] {
    return [{
      type: 'input',
      component: 'eInput',
      label: '标题',
      model: '_compLabel',
      defaultValue: this.drag.label
    }, {
      type: 'input',
      component: 'eInput',
      label: 'CSS Class',
      model: '_className',
      defaultValue: '',
      props: {
        type: 'textarea',
        rows: 2
      }
    }, {
      type: 'input',
      component: 'eInput',
      label: 'CSS Style',
      model: '_style',
      defaultValue: '',
      props: {
        type: 'textarea',
        rows: 2
      }
    }, {
      type: 'switch',
      component: 'eSwitch',
      label: '显示字段(display)',
      model: '_display',
      defaultValue: true
    }]
  }

  private get baseDataModel(): IComponentConfig[] {
    return [{
      type: 'input',
      component: 'eInput',
      label: '字段名',
      model: 'model',
      defaultValue: ''
    }, {
      type: 'input',
      component: 'eInput',
      label: '默认值',
      model: 'defaultValue',
      defaultValue: ''
    }, {
      type: 'rule',
      component: 'DataRule',
      label: '校验规则',
      model: 'rules',
      defaultValue: {
        required: false,
        pattern: ''
      }
    }]
  }

  private appendGroup(baseList: IComponentConfig[], group: string, label: string, appendList: IComponentConfig[]) {
    return {
      label,
      list: this.mergeList(baseList, appendList).map(item => Object.assign(item, { group }))
    }
  }

  private mergeList(baseList: IComponentConfig[], appendList: IComponentConfig[]): IComponentConfig[] {
    for (const item of appendList) {
      const index = baseList.findIndex(attr => attr.model === item.model)
      if (index > -1) {
        baseList.splice(index, 1, Object.assign(baseList[index], item))
      } else {
        baseList.push(item)
      }
    }
    return baseList
  }

  get configInfo() {
    return {
      drag: this.drag,
      configs: {
        props: this.props,
        dataModel: this.dataModel,
        events: this.events,
        slots: this.slots,
        watch: this.watch,
        lifeCircle: this.lifeCircle,
        style: this.style
      }
    }
  }
}